<!--
 * @Author: GuoShuning
 * @Date: 2022-12-13 15:42:53
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-12-30 11:16:46
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="./common/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>财务报表</title>
</head>

<body>
  <div class="moneyScreenPage" id="app">
    <div class="topScreenBox itemBoxContent">
      <div class="topScreenBox_title">
        <div class="topScreenBox_title_text"><img src="./common/img/title.png" alt="">财务报表</div>
        <div class="input-group">
          <label>选择日期</label>
          <input placeholder="输入关键字" />
        </div>
      </div>
      <div class="topScreenBox_content">
        <div class="item_box bg1">
          <div class="item_box_tips">签约项目数/个</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg2">
          <div class="item_box_tips">签约单位/家</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg3">
          <div class="item_box_tips">签约总金额/万</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg4">
          <div class="item_box_tips">项目成本总金额/万</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg5">
          <div class="item_box_tips">项目净利润/万</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg6">
          <div class="item_box_tips">所有项目平均利润率</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg7">
          <div class="item_box_tips">项目已回款总金额/万</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg8">
          <div class="item_box_tips">项目未回款总金额</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box bg9">
          <div class="item_box_tips">未付成本总金额</div>
          <div class="item_box_nums">88</div>
        </div>
        <div class="item_box">

        </div>
      </div>
    </div>
    <div class="bottomScreenBox itemBoxContent">
      <div class="bottomScreenBox_title">
        <div class="bottomScreenBox_title_text">已签约项目情况</div>
        <div>
          <button class="button_info"><img src="./common/img/download.png" />导出</button>
          <button class="button_primary"><img src="./common/img/add-full.png"
              style="width: 8px;height: 8px;" />新建项目</button>
        </div>
      </div>
      <div class="bottomScreenBox_content">
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td" style="width: 2%;">序号</div>
              <div class="td center" style="width: 10%;">项目名称</div>
              <div class="td center" style="width: 10%;">签约单位</div>
              <div class="td center" style="width: 10%;">项目负责人</div>
              <div class="td center">签约总金额</div>
              <div class="td center">项目签约明细</div>
              <div class="td center">成本总金额</div>
              <div class="td center">项目成本明细</div>
              <div class="td center">项目净利润</div>
              <div class="td center">项目利润率</div>
              <div class="td center">回款金额 / 回款比例</div>
              <div class="td center">已回款总金额 / 比例</div>
              <div class="td center">未回款总金额 / 比例</div>
              <div class="td center">未付成本明细</div>
              <div class="td center">未付成本合计 / 比例</div>
              <div class="td center">终验时间</div>
              <div class="td">操作</div>
              <div class="td fixed">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr" v-for="(item,index) in list" :key="index">
              <div class="td" style="width: 2%;">1</div>
              <div class="td center"  style="width: 10%;">杭州彭埠街道平安建设办-杨柳群园二区三区智慧安防小区建设</div>
              <div class="td center" style="width: 10%;">浙江移动信息系统集成有限公司</div>
              <div class="td center" style="width: 10%;">周晓咏</div>
              <div class="td center">1,862,170.00</div>
              <div class="td center">
                <div>设备费：1,054,877.00</div>
                <div>施工费：1,054,877.00</div>
                <div>集成费：1,054,877.00</div>
                <div>维护费：1,054,877.00</div>
                <div>软件费：1,054,877.00</div>
              </div>
              <div class="td center">509,675.77</div>
              <div class="td center">
                <div>设备采购：xx</div>
                <div>软件采购：无</div>
                <div>隐性成本：xx</div>
                <div>报销增补：x</div>
                <div>员工提成：xx=xx＋xx</div>
              </div>
              <div class="td center">50</div>
              <div class="td center">50%</div>
              <div class="td center">
                <div>设备费：3,145.50 / 8%</div>
                <div>施工费：3,145.50 / 8%</div>
                <div>集成费：3,145.50 / 8%</div>
                <div>维护费：3,145.50 / 8%</div>
                <div>软件费：3,145.50 / 8%</div>
              </div>
              <div class="td center">
                <div>3,145.50</div>
                <div>50%</div>
              </div>
              <div class="td center">
                <div>3,145.50</div>
                <div>50%</div>
              </div>
              <div class="td center">
                <div>设备采购：xx</div>
                <div>软件采购：无</div>
                <div>隐性成本：xx</div>
                <div>报销增补：x</div>
                <div>员工提成：xx=xx＋xx</div>
              </div>
              <div class="td center">
                <div>3,145.50</div>
                <div>50%</div>
              </div>
              <div class="td center">2022-11-08</div>
              <div class="td">
                <button class="button_success_text">处理</button>
                &ensp;
                <button class="button_primary_text">查看</button>
              </div>
              <div class="td fixed">
                <button class="button_success_text">处理</button>
                &ensp;
                <button class="button_primary_text">查看</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tableTips">终验时间来源：【项目管理-实施跟进-项目详情-验收】当且仅当验收类型为“客户验收”，验收结果为“通过”时的时间</div>
      <div class="pagination">
        <span>共 {{total}} 条</span>
        <ul>
          <li @click="shang"><i class="bi bi-chevron-left"></i></li>
          <li v-show="start > 0" @click="()=>{
              if(start > 0){
                params.page = start;
                end-=3
                start-=3
              }
            }">
            ...
          </li>
          <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
            :class="[item == params.page ? 'active' :'']">
            {{item}}
          </li>
          <li v-show="end <= totalPage" @click="()=>{
              if(end <= totalPage){
              params.page = end;
              end+=3
              start+=3
              }
            }">
            ...
          </li>
          <li @click="next"><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import { childMessage } from "./common/js/event.js";
  import DiaLog from "./common/js/diaLog.js";
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [
          {
            isShow: true,
          },
          {
            isShow: true,
          },
          {
            isShow: true,
          },
        ],
        params: {
          page: 1,
          limit: 10,
        },
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      //成本概算审批
      onCostEstimateApproval() {
        childMessage({
          src: "./项目详情（售前-成本概算审批）.html",
          type: "page",
        });
      },
      //新建文件夹弹框
      onNewFolder() {
        newFolder_yik.show();
      },
      //上传资料弹框
      onNewFile() {
        newFile_yik.show();
      },
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
      },
    },
  }).mount("#app");
</script>

</html>